<!-- 商品列表，大图加横向滑动小图 -->
<template>
  <div class="jf_wrapper">
    <div class="jf_list1" v-for="(item,index) of jfgoods" :key="index">
      <div class="big_img"><img :src="item.data[0].img_url" alt=""><i class="arrow"></i></div>
      <div class="jf_list_con_w">
        <div class="jf_list_con">
          <div class="content" v-for="(items,index) of item.data[0].products" :key="index" @click="goods_link(items.h5_url)">
            <div class="small_img"><img v-lazy="items.img_url" alt=""></div>
            <div class="title">{{items.product_name}}</div>
            <div class="price"><span class="now_price">{{items.integralNumber}}积分</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>  
</template>

<script>
import axios from 'axios'
export default {
    name: 'GoodsList1',
    data(){
      return {
        jfgoods:[]
      }
    },
    methods:{
      goods_link(e){
        window.location.href = e
      },
      getJfgoods:function(){
        axios.get('/api/jfgoods.json')
          .then(this.getjfInfoSucc)
      },
      getjfInfoSucc:function(res){
        const data=res.data.data
        console.log(data)
        if(data){
          this.jfgoods=data
        }  
      }
    },
    mounted(){
      this.getJfgoods();
    }
}

</script>

<style lang="stylus" scoped>
.jf_list1{width:100%;overflow:hidden;margin-top:0.2rem;background:#fff;}
.big_img{width:100%;overflow:hidden;height:0;padding-bottom:49.907%;position:relative;}
.big_img img{width:100%;}
.big_img .arrow{position: absolute;left: 50%;margin-left: -0.0866665rem;bottom: 0;width: 0;height: 0;border-left: 0.173333rem solid transparent;border-right: 0.173333rem solid transparent;border-bottom: 0.173333rem solid #fff;z-index: 2;}
.jf_list_con_w{width:100%;overflow:hidden;}
.jf_list_con{display:flex;flex-wrap: wrap;}
.content{flex:0 0 33.2333%;border-bottom:0.5px solid #eee;padding-bottom:5px;}
.content:nth-child(3n+2){border-left:0.5px solid #eee;border-right:0.5px solid #eee;}
.small_img{width:100%;height:0;padding-bottom:100%;}
.small_img img{width:100%;}
.title{height:0.6rem;line-height:0.3rem;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;font-size:0.2rem;color:#363636;font-weight:normal;white-space:normal;padding:0 5px;}
.price{font-size:0.2rem;color:#ff6702;margin-top:0.1rem;padding:0 5px;}
.price span{display:inline-block;}
.price .now_price{}
</style>